<template>
  <a-form
      layout="vertical"
      :model="activeData.props"
      name="basic"
      autocomplete="off"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
  >
    <a-form-item
        label="标题"
        name="title"
        :rules="[{ required: true, message: '请输入标题' }]"
    >
      <a-input v-model:value="activeData.props.title" :disabled="activeData.isLocked"/>
    </a-form-item>
    <a-form-item
        label="选项"
        name="list"
    >
      <a-space direction="vertical" size="middle">
        <template v-for="(item,index) in  activeData.props.list" :key="index">
          <a-space direction="vertical">
            <a-form-item-rest>
              <a-checkbox @change="changeCheck($event,index)"  v-model:checked="item.checked" :disabled="activeData.isLocked">
                <div class="flex items-center justify-center">
                  <a-form-item-rest>
                    <a-input v-model:value="item.text" :disabled="activeData.isLocked" placeholder="输入选项文字..."/>
                  </a-form-item-rest>
                  <MinusCircleOutlined
                      v-if="activeData.props.list.length > 1&&index>=1"
                      class="dynamic-delete-button ml-[5px]"
                      @click="removeDomain(item)"
                  />
                </div>
              </a-checkbox>
            </a-form-item-rest>
          </a-space>
        </template>
      </a-space>
    </a-form-item>
    <a-form-item>
      <a-button type="link" @click="addDomain" class="w-full" :disabled="activeData.isLocked">
        <PlusOutlined/>
        添加选项
      </a-button>
    </a-form-item>
    <a-form-item
        name="isVertical"
    >
      <a-checkbox :disabled="activeData.isLocked" v-model:checked="activeData.props.isVertical">竖向排列</a-checkbox>
    </a-form-item>
  </a-form>
</template>

<script setup>
import {MinusCircleOutlined, PlusOutlined} from '@ant-design/icons-vue';
import {storeToRefs} from "pinia";
import useQuestion from "../../hooks/useQuestion.js";
const questionStore = useQuestion()
const {activeData} = storeToRefs(questionStore)
const addDomain = () => {
  activeData.value.props.list.push({
    checked:false,
    text:"选项",
    value:'item' + (activeData.value.props.list.length + 1)
  });
};
const onFinish = (values) => {
  console.log('Success:', values);
};

const onFinishFailed = (errorInfo) => {
  console.log('Failed:', errorInfo);
};
const removeDomain = (item) => {
  const index = activeData.value.props.list.indexOf(item);
  if (index !== -1) {
    activeData.value.props.list.splice(index, 1);
  }
};
const changeCheck = (e,index) => {
  activeData.value.props.list[index].checked = e.target.checked
}
</script>

<style scoped>
:deep(.ant-form-item-control-input-content), :deep(.ant-space-item) {
  display: flex;
  justify-content: flex-start;
}
</style>
